<template>
  <div class="background"></div>
  <PageHeader class="page-header" />
  <Markdown class="markdown" />
</template>

<script setup lang="ts">
import PageHeader from "./components/PageHeader.vue";
import Markdown from "./components/Markdown.vue";
</script>

<style scoped>
.background {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-image: url("/images/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}
.page-header {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 150px;
}
.markdown {
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: calc(100% - 150px);
}
</style>
